<script setup lang="ts">
const router = useRouter();
const route = useRoute();
interface Props {}
const props = withDefaults(defineProps<Props>(), {});
// const url = JSON.parse(localStorage.getItem("userData")).avatar;
const fit = "cover";
const user_info: any = ref(JSON.parse(localStorage.getItem("userData")));
const buttons = ref([
  { text: "退出登录", type: "plain" },
  { text: "个人信息", type: "plain" },
]);
const show = ref(false);
const btn_click = (str: any) => {
  if (str == "退出登录") {
    localStorage.removeItem("accessToken");
    router.push("/login");
  }
  if (str == "个人信息") {
    show.value = true;
  }
};
const update_key = ref(0);
const avatar = computed(
  () => import.meta.env.VITE_APP_API_URL + user_info.value?.avatar
);
const edit_close = () => {
  show.value = false;
  user_info.value = JSON.parse(localStorage.getItem("userData"));
  // console.log(user_info.value );
  update_key.value++;
};
const userid = computed(() => user_info.value.id);
</script>

<template>
  <div :key="update_key">
    <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 0px;"
      :show-arrow="false"
      popper-class="popover-user"
    >
      <template #reference>
        <el-avatar :src="avatar + '?' + Math.random()" />
      </template>
      <template #default>
        <div>
          <p class="user">
            <span>{{ user_info?.nickname || "用户名" }}</span>
            <template v-if="user_info?.permissions == '0'">
              <el-button
                @click="router.push('/system/log')"
                v-if="route.name == 'diskMian' && user_info?.permissions == '0'"
                size="small"
                icon="Right"
                text
                bg
                >系统管理</el-button
              >
              <el-button
                @click="router.push('/disk/main')"
                v-else
                size="small"
                icon="Back"
                text
                bg
                >网盘系统</el-button
              >
            </template>
          </p>
          <p class="control">
            <el-button
              v-for="button in buttons"
              :key="button.text"
              :type="button.type"
              link
              @click="btn_click(button.text)"
            >
              {{ button.text }}
            </el-button>
          </p>
        </div>
      </template>
    </el-popover>
    <UserEdit :show="show" :id="userid" @close="edit_close" />
  </div>
</template>

<style lang="scss" scoped>
.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.control {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
